<template>
  <div class="expert-box">
    <el-tabs type="border-card">
      <el-tab-pane label="基本信息">
        
        <el-descriptions class="margin-top" :column="2" :size="size" border>
          <el-descriptions-item>
            <template slot="label"> 姓名 </template>
            <div class="display-notice">
              <el-input v-model="expertInfo.expertName"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 性别 </template>
            <div class="display-notice">
              <el-radio
                label="0"
                style="margin-left: 20px"
                v-model="expertInfo.gender"
                >男</el-radio
              >
              <el-radio label="1" v-model="expertInfo.gender">女</el-radio>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 身份证号 </template>
            <div class="display-notice">
              <el-input v-model="expertInfo.idCard"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 手机号 </template>
            <div class="display-notice">
              <el-input v-model="expertInfo.phone"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 邮箱 </template>
            <div class="display-notice">
              <el-input v-model="expertInfo.email"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 健康状况 </template>
            <div class="display-notice">
              <el-radio
                label="1"
                style="margin-left: 20px"
                v-model="expertInfo.health"
                >健康</el-radio
              >
              <el-radio label="2" v-model="expertInfo.health">不健康</el-radio>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 通讯地址 </template>
            <div>
              <span class="map-box"> 省: </span>
              <el-select
                style="width: 160px"
                v-model="province"
                class="bordered-select"
                @change="changeCityList"
              >
                <el-option
                  v-for="(item, index) in mapData"
                  :key="index"
                  :value="item"
                >
                  {{ item.n }}
                </el-option>
              </el-select>
              <span class="map-box"> 市: </span>
              <el-select
                v-model="city"
                @change="changeAreaList"
                style="width: 160px"
              >
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :value="item"
                >
                  {{ item.n }}
                </el-option>
              </el-select>
              <span class="map-box"> 区: </span>
              <el-select v-model="area" style="width: 160px">
                <el-option
                  v-for="(item, index) in areaList"
                  :key="index"
                  :value="item.n"
                >
                  {{ item.n }}
                </el-option>
              </el-select>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 详细地址 </template>
            <div class="display-notice">
              <el-input v-model="addr"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 工作单位 </template>
            <div class="display-notice">
              <el-input v-model="expertInfo.workUnit"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 所属类型 </template>
            <div>
              <el-select
                placeholder="请选择业务类型"
                clearable
                class="my_style"
                v-model="expertInfo.type"
              >
                <el-option
                  v-for="dict in dict.type.basic_expert_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 开户行 </template>
            <div class="display-notice">
              <el-input v-model="expertInfo.bank"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 银行卡号 </template>
            <div class="display-notice">
              <el-input v-model="expertInfo.bankAccountNumber"></el-input>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 证件照 </template>
            <div class="display-notice">
              <imageUpload
                :cardMessage.sync="fileInfo"
                ref="imgChildren"
              ></imageUpload>
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <div style="height: 130px">
          <el-button
            type="primary"
            style="margin-left: 1100px; margin-top: 30px"
            @click="saveBasicInfo"
            >保存</el-button
          >
          <el-button type="info" @click="back">取消</el-button>
        </div>
      </el-tab-pane>
 
    </el-tabs>
  </div>
</template>

<script>
import { addExpert } from "@/api/expert/expert";
import { getPurCode, deleteFile } from "@/api/purs/purs";
import { addExpertFile, deleteBsExpertFiles } from "@/api/basic/expertFile";
import axios from "axios";
export default {
  dicts: ["basic_expert_type"],
  data() {
    return {
      fileInfo: {
        code: 1,
      },
      //基本信息
      expertInfo: {},
      size: "",
      mapData: [],
      addr: "",
      //省份
      province: "",
      //市
      cityList: [],
      city: "",
      //区
      areaList: [],
      area: "",
      expertFile: {},
      uploadFlag: true,
    };
  },
  watch: {
    fileInfo: {
      handler(value) {
        if (value.code == 1) {
          this.expertFile.expertCode = this.expertInfo.expertCode;
          this.expertFile.name = value.fileName;
          this.expertFile.url = value.filePath;
          addExpertFile(this.expertFile).then((res) => {
            if (res.code == 200) {
              this.uploadFlag = false;
              this.$modal.msgSuccess("上传成功");
            }
          });

       
        } else {
          deleteFile(this.expertFile.name).then();
          deleteBsExpertFiles(this.expertFile.name).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
            }
          });
        }
      },
    },
  },
  created() {
    this.init();
    this.getExpertCode();
  },
  methods: {
    getExpertCode() {
      let tableName = "bs_expert_info";
      getPurCode(tableName).then((response) => {
        this.expertInfo.expertCode = response.data.encodeNow;
      });
    },
    saveBasicInfo() {
      if (this.area != "") {
        this.expertInfo.address =
          this.province +
          "省" +
          this.city +
          "市" +
          this.area +
          "区" +
          this.addr;
      } else {
        this.expertInfo.address =
          this.province + "省" + this.city + "市" + this.addr;
      }
      addExpert(this.expertInfo).then((res) => {
        if(res.code==200){
          this.$modal.msgSuccess('新增成功');
          this.$router.back();
        }
        
      });
    },
    back(){
      this.$router.back();
    },
    changeCityList(value) {
      this.city = "";
      this.area = "";
      this.province = value.n;
      this.cityList = value.c;
    },
    changeAreaList(value) {
      this.area = "";
      this.city = value.n;
      this.areaList = value.c;
    },
    init() {
      axios.get("/area.json").then((response) => {
        this.mapData = response.data;
      });
    },
  },
};
</script>

<style scope>
.el-select-dropdown .el-select-dropdown__item {
  /* 设置字体颜色为黑色 (#333) */
  color: #409eff; /* 修改激活时的字体颜色 */
  font-weight: bold;
}

.display-notice .el-input input {
  border: none;
  outline: none;
  box-shadow: none;
}
</style>